<template>
    <div class="news-container">
        <h2 class="news-title">News组件</h2>
        <ul class="news-list">
            <li v-for="item in newsList" :key="item.id">
                <!-- 第一种写法 -->
                <!-- <RouterLink :to="`/news/detail?id=${item.id}&title=${item.title}&content=${item.content}`" class="news-link">
                    {{ item.title }}
                </RouterLink> -->
                <!-- 第二种写法 -->
                <!-- <RouterLink :to="{path: '/news/detail',query: {id: item.id,title: item.title,content: item.content}}" class="news-link">
                    {{ item.title }}
                </RouterLink> -->
                <!-- 第三种写法 -->
                <RouterLink :to="{name: 'detailName',query: {id: item.id,title: item.title,content: item.content}}" class="news-link">
                    {{ item.title }}
                </RouterLink>
            </li>
        </ul>
        <!-- 新闻详情 -->
        <div class="news-detail">
            <RouterView></RouterView>
        </div>
    </div>
</template>

<script setup name="News" lang="ts">
import { ref, reactive } from 'vue'
import { RouterView,RouterLink } from 'vue-router'
const newsList = reactive([
    {
        id: 1,
        title: '新闻1',
        content: '新闻1内容'
    },
    {
        id: 2,
        title: '新闻2',
        content: '新闻2内容'
    },
    {
        id: 3,
        title: '新闻3',
        content: '新闻3内容'
    }
])
</script>

<style scoped>
.news-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.news-title {
    color: #333;
    font-size: 24px;
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.news-list {
    list-style: none;
    padding: 0;
}

.news-list li {
    margin-bottom: 12px;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.news-list li:hover {
    background-color: #f5f5f5;
}

.news-link {
    color: #2c3e50;
    text-decoration: none;
    font-size: 16px;
}

.news-link:hover {
    color: #42b983;
}

.news-detail {
    margin-top: 30px;
    padding: 20px;
    border-top: 1px solid #eee;
}
</style>
